<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
  <style>
    * {
      margin: 0;
      padding: 0;
      color: aliceblue;
    }
    .box {
      width: 100%;
      height: 100vh;
      overflow: hidden;
      display: flex;
      height: 100vh;
      background-image: url('./assets/two/two-bg.png');
    }
    .left {
        width: 500px;
        height: 100%;
        margin-top: 130px;
        margin-left: 20px;
        order: 1;
        background-image: url('./assets/two/two-left-img.png');
        background-repeat: no-repeat;
    }
    .center {
        flex: 1;
        order: 2;
    }
    #center-map {
      margin-top: 200px;
      width: 900px;
      height: 750px;
    }
    .right {
        width: 500px;
        height: 100%;
        margin-top: 130px;
        margin-right: 20px;
        order: 3;
        background-image: url('./assets/two/two-right-img.png');
        background-repeat: no-repeat;
       
    } 
  </style>
</head>
<body>
  <div class="box">
    <div class="left animate__animated animate__bounceInLeft"></div>
    <div class="center">
      <div id="center-map"></div>
    </div>
    <div class="right animate__animated animate__bounceInRight"></div>
</div>
<script type="text/javascript" src="./echart3.8.5.js"></script>
<script type="text/javascript" src="./mapData/chinaMap.json"></script>
<script type="text/javascript">
  function initMap() {
    let dom = document.getElementById('center-map');
    let myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    echarts.registerMap('china', chinaMap);
    let option = {
      zoom:false,
      roam: false,
      geo: {
        show: true,
        map: 'china',
        label: {
            normal: {
                show: false
            },
            emphasis: {
                show: false,
            }
        },
        roam: false,
        itemStyle: {
            normal: {
              areaColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#AAC1E2'
                  },
                  {
                    offset: 0.33,
                    color: '#436AAA'
                  },
                  {
                    offset: 0.66,
                    color: '#2A57A8'
                  },
                  {
                    offset: 1,
                    color: '#143167'
                  }
                ],
                globalCoord: false,
              },
              borderColor: '#3B5077',
            },
            emphasis: {
                areaColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#AAC1E2'
                  },
                  {
                    offset: 0.33,
                    color: '#436AAA'
                  },
                  {
                    offset: 0.66,
                    color: '#2A57A8'
                  },
                  {
                    offset: 1,
                    color: '#143167'
                  }
                ]
              },
            }
        }
    },
        series: [
          {
              name: '',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              symbolSize: function(value) {
                  return value[2] / 5;
              },
              legendHoverLink: true,
              showEffectOn: 'render',
              zlevel: 6,
              rippleEffect: {
                  scale: 6,
                  color: function(value) {
                    return value.value[3];
                  },
                  brushType: 'fill'
              },
              tooltip: {
                  show: true,
                  backgroundColor: 'rgba(0,0,0,.6)',
                  borderColor: 'rgba(147, 235, 248, .8)',
                  textStyle: {
                      color: '#FFF'
                  }
              },
              label: {
                  normal: {
                    show: true,
                    formatter: '{b}',
                    fontSize: 12,
                    offset: [0, 2],
                    position: 'bottom',
                    textBorderColor: '#fff',
                    textShadowColor: '#000',
                    textShadowBlur: 10,
                    textBorderWidth: 0,
                    color: '#ffffff',
                  }
              },
              itemStyle: {
                  normal: {
                    color: function(value) {
                      return value.value[3];
                    },
                  },
                  color: '#50E3C2',
                  borderColor: 'rgba(225,255,255,2)',
                  borderWidth: 4,
                  shadowColor: '#E1FFFF',
                  shadowBlur: 10
              },
              data: [
            {
              "name": "国家碳排放基础数据库",
              "value": [116.405285, 39.904989, 40, '#FF3300']
            },
            {
              "name": "辽宁分院",
              "value": [123.429096,41.796767, 50, '#50E3C2']
            },
            {
              "name": "山东分院",
              "value": [119.000923,36.675807, 32, '#50E3C2']
            },
            {
              "name": "江苏分院",
              "value": [120.767413,32.041544, 40, '#50E3C2']
            },
            {
              "name": "安徽分院",
              "value": [117.283042,31.36119, 40, '#50E3C2']
            },
            {
              "name": "重庆分院",
              "value": [106.504962,29.533155, 50, '#50E3C2']
            },
            {
              "name": "湖南分院",
              "value": [112.982279,28.19409, 28, '#50E3C2']
            },
            {
              "name": "福建分院",
              "value": [119.306239,26.075302, 48, '#50E3C2']
            },
            {
              "name": "广东分院",
              "value": [113.280637,23.125178, 40, '#50E3C2']
            }
          ],
              encode: {
                  value: 2
              }
          },
          {
              name: "",
              type: "lines",
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.7,
                  orient: 'horizontal',
                  color: "#50E3C2",
                }
              },
              show: true,
              data: [
                  {
                      fromname: '国家碳排放基础数据库',
                      toname: '辽宁分院',
                      coords: [
                          [116.405285, 39.904989],
                          [123.429096, 41.796767]
                      ]
                  }
              ]
          },
          {
              name: "",
              type: "lines",
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.4,
                  orient: 'horizontal',
                  color: "#5AE510",
                }
              },
              show: true,
              data: [
                  {
                      fromname: '国家碳排放基础数据库',
                      toname: '江苏分院',
                      coords: [
                          [116.405285, 39.904989],
                          [120.767413,32.041544]
                      ]
                  }
              ]
          },
          {
              name: "",
              type: "lines",
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'dashed',
                  width: 2,
                  opacity: 1,
                  curveness: 0.7,
                  orient: 'horizontal',
                  color: "#5AE510",
                }
              },
              show: true,
              data: [
                  {
                      toname: '国家碳排放基础数据库',
                      fromname: '山东分院',
                      coords: [
                          [119.000923,36.675807],
                          [116.405285, 39.904989]
                      ]
                  }
              ]
          },
          {
              name: "",
              type: "lines",
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'dashed',
                  width: 2,
                  opacity: 1,
                  curveness: 0.3,
                  orient: 'horizontal',
                  color: "#5AE510",
                }
              },
              show: true,
              data: [
                  {
                      toname: '国家碳排放基础数据库',
                      fromname: '安徽分院',
                      coords: [
                          [117.283042,31.36119],
                          [116.405285, 39.904989]
                      ]
                  }
              ]
          },
          {
              name: "",
              type: "lines",
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.6,
                  orient: 'horizontal',
                  color: "#50E3C2",
                }
              },
              show: true,
              data: [
                  {
                      toname: '国家碳排放基础数据库',
                      fromname: '重庆分院',
                      coords: [
                          [106.504962,29.533155],
                          [116.405285, 39.904989]
                      ]
                  }
              ]
          },
          {
              name: "",
              type: "lines",
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.4,
                  orient: 'horizontal',
                  color: "#50E3C2",
                }
              },
              show: true,
              data: [
                  {
                      toname: '国家碳排放基础数据库',
                      fromname: '湖南分院',
                      coords: [
                          [112.982279,28.19409],
                          [116.405285, 39.904989]
                      ]
                  }
              ]
          },
          {
              name: "",
              type: "lines",
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.4,
                  orient: 'horizontal',
                  color: "#50E3C2",
                }
              },
              show: true,
              data: [
                  {
                      toname: '国家碳排放基础数据库',
                      fromname: '福建分院',
                      coords: [
                          [119.306239,26.075302],
                          [116.405285, 39.904989]
                      ]
                  }
              ]
          },
          {
              name: "",
              type: "lines",
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.5,
                  orient: 'horizontal',
                  color: "#50E3C2",
                }
              },
              show: true,
              data: [
                  {
                      fromname: '广东分院',
                      toname: '国家碳排放基础数据库',
                      coords: [
                          [113.280637,23.125178],
                          [116.405285, 39.904989]
                      ]
                  }
              ]
          },
          {
              name: '区域',
              type: 'map',
              map: 'china',
              data: [],
              geoIndex: 0,
              tooltip: {
                  show: false,
              },
              label: {
                  show: false,
              },
              roam: false,
              itemStyle: {
                  borderColor: '#143167',
                  borderWidth: 1,
                  shadowColor: '#436AAA',
                  shadowOffsetX: 2,
                  shadowOffsetY: 4,
                  shadowBlur: 8,
                  normal: {
                    emphasis: {
                      show: false,
                    }
                  }
              }
          }
        ]
    };
    myChart.setOption(option);
  }
  initMap();
</script>
</body>
</html>